<!--通知内容详情-->
<template>
  <div class="content">
    <van-row>
      <van-col span="24">
        <p class="title">{{contentInfo.title}}</p>
      </van-col>
    </van-row>
    <van-row style="padding:5px">
      <van-col span="18" class="describe">
        <p>部门：{{contentInfo.departMent}}</p>
        <p>发布人：{{contentInfo.publisher}}</p>
        <p>
          发布时间：
          <time>{{contentInfo.date}}</time>
          浏览人数：{{contentInfo.nums}}
        </p>
      </van-col>
      <van-col span="6" class="collect-btn">
        <a class="sc-buttom" @click="collect">
          <van-icon color="#FFFFFF" name="star-o" v-if="contentInfo.isCollected == 1" />
          <span>{{contentInfo.isCollected == 0 ?'已取消':'已收藏' }}</span>
        </a>
      </van-col>
    </van-row>
    <van-row>
      <van-col style="background-color: #faf9fb;" span="24">
        <div class="text">
          <p>竞赛委员会组成：</p>
          <p>主任：杜明义</p>
          <p>成员：王震远、王坚、赵江洪、冯永龙</p>
          <p>指导组：</p>
          <p>成员：黄明、石若明、张健钦、蔡国印、靖常峰、刘扬、危双丰、王文宇、郭明、刘建华、周磊、余凡、尹川、曹诗颂</p>
          <p>评审组：</p>
          <p>成员：赵江洪、黄明、张学东、王文宇</p>
        </div>
      </van-col>
    </van-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      contentInfo: {}
    };
  },
  mounted() {
    this.initPage();
  },
  methods: {
    initPage() {
      // 接口查询。。。。。
      console.log(this.$store.state.noticeId); // 获取当前仓库中存储的通知ID再调接口
      this.contentInfo = {
        content:
          "[科技处1]北京建筑大学第七届GIS应用技能大赛暨第八届全国大学生GIS技能应用大赛选拨赛通知",
        date: new Date(1575300387725).format("yyyy-MM-dd"),
        departMent: "测绘与城市空间信息学院",
        publisher: "谁谁谁,谁是谁的睡",
        isCollected: 1, // 1为已收藏、0 为未收藏
        isNews: 0, // 最新未读 0未读  1已读
        nums: 1111 // 阅读数量
      };
    },
    // 收藏or取消
    collect() {
      // 接入接口
      this.contentInfo.isCollected = this.contentInfo.isCollected == 1 ? 0 : 1;
    }
  }
};
</script>
<style lang="less" scoped>
.content {
  height: 100%;
  overflow-y: auto;
  .title {
    padding: 5px;
    color: #321943;
    font-size: 19px;
  }
  .describe {
    p {
      font-size: 12px;
      margin: 4px;
      color: #88808e;
    }
  }
  .collect-btn {
    text-align: right;
    a {
      .van-icon,
      span {
        display: inline-block;
        vertical-align: middle;
      }
    }
  }
  .ysc-buttom {
    font-size: 12px;
    display: block;
    padding: 3px;
    border-radius: 12px;
    background-color: #f5f5f5;
    margin: 5px;
    // width: 60px;
    text-align: center;
  }
  .sc-buttom {
    font-size: 12px;
    display: block;
    padding: 3px;
    border-radius: 12px;
    background-color: #6a4781;
    margin: 5px;
    text-align: center;
    span {
      color: #ffffff;
    }
  }
  .text {
    margin: 10px;
    height: auto;
    p {
      font-size: 16px;
    }
  }
}
</style>